<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>

<%--<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>--%>
<!DOCTYPE html>
<html>
<head>
    <title>员工仪表盘</title>
    <style>
        /* CSS样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .sidebar {
            width: 200px;
            height: 100vh;
            background-color: #f1f1f1;
            position: fixed;
            overflow-x: hidden;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 6px 8px 6px 16px;
            text-decoration: none;
            font-size: 20px;
            color: #818181;
            display: block;
        }
        .sidebar a:hover {
            color: #f1f1f1;
            background-color: #666;
        }
        .content {
            margin-left: 200px; /* 与侧边栏宽度相同 */
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>欢迎来到员工管理系统</h1> <!-- 假设employee对象已在请求属性中设置 -->
    <p>欢迎你: ${username}</p>
</div>

<div class="sidebar">
    <a href="#" id="employees-button">员工管理</a>
    <a href="#" id="department-button">部门管理</a>
    <a href="#" id="positions-button">职位管理</a>
</div>


<div class="content"  id="content-area">
<%--    <p>这里是你的仪表盘，显示了一些重要的信息和功能。</p>--%>
    <!-- 在这里添加其他内容 -->






</div>
</body>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#employees-button').click(function(e) {
            e.preventDefault(); // 阻止默认的跳转行为
            $.ajax({
                url: '${pageContext.request.contextPath}/employees/to/employees', // Controller中的请求映射路径
                type: 'GET',
                success: function(response) {
                    $('#content-area').html(response); // 将响应的内容插入到content-area中
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error: " + error);
                }
            });
        });
    });

    $(document).ready(function() {
        $('#positions-button').click(function(e) {
            e.preventDefault(); // 阻止默认的跳转行为
            $.ajax({
                url: '${pageContext.request.contextPath}/positions/to/positions', // Controller中的请求映射路径
                type: 'GET',
                success: function(response) {
                    $('#content-area').html(response); // 将响应的内容插入到content-area中
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error: " + error);
                }
            });
        });
    });

    $(document).ready(function() {
        $('#department-button').click(function(e) {
            e.preventDefault(); // 阻止默认的跳转行为
            $.ajax({
                url: '${pageContext.request.contextPath}/departments/to/departments', // Controller中的请求映射路径
                type: 'GET',
                success: function(response) {
                    $('#content-area').html(response); // 将响应的内容插入到content-area中
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error: " + error);
                }
            });
        });
    });



</script>



</html>
